<template>

  <el-dialog
    :visible.sync="dialogVisible"
    :close-on-click-modal="false"
    title="阅卷审核"
    width="600px"
    @close="handleClose"
  >
    <div class="err-box">
      <div>1、确认阅卷完整无误。</div>
      <div>2、勾选强制审核后，不校验阅卷是否完成，直接通过审阅。</div>
    </div>

    <el-form ref="postForm" :model="postForm" :rules="rules" label-position="left" label-width="80px">

      <el-form-item label="审阅状态" prop="auditState">
        <el-radio-group v-model="postForm.auditState">
          <el-radio :label="1">通过</el-radio>
          <el-radio :label="2">退回阅卷</el-radio>
        </el-radio-group>
      </el-form-item>

      <el-form-item v-if="postForm.auditState===1" label="强行审阅">
        <el-checkbox v-model="postForm.force" /> 勾选后，不校验是否批阅。
      </el-form-item>

      <el-form-item v-if="postForm.auditState===1" label="立即出分">
        <el-checkbox v-model="postForm.autoSettle" /> 审阅后立即进行出分处理。
      </el-form-item>

      <el-form-item v-if="postForm.auditState===2" label="退回理由" prop="reason">
        <el-input v-model="postForm.reason" type="textarea" placeholder="输入审核理由，如：阅卷不客观、给分不合理等。"/>
      </el-form-item>

    </el-form>

    <div slot="footer" class="dialog-footer">
      <el-button @click="handleClose()">取 消</el-button>
      <el-button :loading="loading" type="primary" @click="handleAudit">确 定</el-button>
    </div>

  </el-dialog>


</template>

<script>

import { audit } from '@/api/exam/review/paper'

export default {
  name: 'ReviewAuditDialog',
  props: {
    examId: String,
    ids: Array,
    visible: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      loading: false,
      dialogVisible: false,

      postForm: {
        examId: '',
        auditState: 1,
        force: false,
        autoSettle: false,
        paperIds: [],
        reason: ''
      },

      rules: {
        auditState: [{ required: true, message: '审阅状态不能为空！' }],
        reason: [{ required: true, message: '退回理由不能为空！', trigger: 'blur' }]
      }
    }
  },
  watch: {

    // 检测查询变化
    visible: {
      handler() {
        this.dialogVisible = this.visible
      }
    },

    ids: {
      handler(val) {
        this.postForm.paperIds = val
      },
      deep: true
    },
    examId: {
      handler(val) {
        this.postForm.examId = val
      }
    }
  },
  created() {
    this.postForm.paperIds = this.ids
    this.postForm.examId = this.examId
  },

  methods: {
    handleClose() {
      this.$emit('update:visible', false)
      this.$emit('close')
    },

    handleAudit() {
      this.loading = true

      this.$refs.postForm.validate(valid => {
        console.log('+++++++++xxx:' + valid)

        if (!valid) {
          return
        }

        audit(this.postForm).then(() => {
          this.$message.success('审阅操作成功！')
          this.loading = false
          this.handleClose()
        }).catch(() => {
          this.loading = false
        })
      })
    }
  }
}
</script>
